<template>
  <div class="wrap">
    <!-- 轮播图 -->
    <mt-swipe :auto="4000">
      <!-- 绑定轮播图数据 -->
      <mt-swipe-item v-for="item in getlunbotu" :key="item.img">
        <img :src="item.img" alt="">
      </mt-swipe-item>
    </mt-swipe>
    <div class="shop-box">
      <div class="title">
        <h4>
          商品标题
        </h4>
      </div>
      <div class="shop_detail">
        <p class="price">
          <span>市场价:<del>￥2300</del></span>
          <span class="sale_price">销售价:<em>￥2100</em></span>
        </p>
        <div class="num">
          <p>购买数量</p>
          <!-- 数量选择框 -->
          <div class="mui-numbox" data-numbox-min="1" data-numbox-max="50">
            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
            <input id="test" class="mui-input-numbox" type="number" value="1">
            <button class="mui-btn mui-btn-numbox-plus" type="button" disabled="">+</button>
          </div>
          <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
          </transition>
        </div>

        <p class="btn-box">
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" @click="goShopcar">加入购物车</mt-button>
        </p>
      </div>


    </div>
    <!-- 商品参数 -->
    <div class="shop_argument">
      <div class="title">
        <h4>商品参数</h4>
      </div>
      <div class="shop_argument_detail">
        <p>商品货号:<span>11111111111</span></p>
        <p>库存情况:<span>200</span></p>
        <p>上架时间:<span>2017-02-04</span></p>
      </div>
      <div class="btn_box">
        <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined" @click="onPic">
          图文介绍
        </button>
        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @click="onComment">
          商品评论
        </button>
      </div>
    </div>
    <Tabbar />
  </div>
</template>
<script>
  import Tabbar from "../comments/tabbar.vue";
  import mui from "../../lib/mui/js/mui.min.js";
  export default {
    data() {
      return {
        getlunbotu: [
          //后台传过来的数据放到这里 好渲染到页面上
          {
            img: "/images/8.jpg"
          },
          {
            img: "/images/55st.png"
          },
          {
            img: "/images/106st.png"
          }
        ],
        flag: false
      };
    },
    mounted() {
      //页面完全加载完之后 在执行这里的代码
      //初始化数字选择框组件
      mui(".mui-numbox").numbox();
    },
    methods: {
      onPic() {
        this.$router.push("/record/shopinfo/pictureinfo/");
      },
      onComment() {
        this.$router.push("/record/shopinfo/goodComments");
      },
      goShopcar() {
        this.flag = !this.flag;
      },
      beforeEnter(el) {
        el.style.transform = "translate(0,0)";
      },
      enter(el, done) {
        el.offsetWidth;
        el.style.transform = "translate(-22px, 470px)";
        el.style.transition = "all 1s cubic-bezier(.4,-0.3,1,.68)";
        done();
      },
      afterEnter(el, done) {
        this.flag = !this.flag;
      }
    },
    components: {
      Tabbar: Tabbar
    }
  };
</script>
<style lang="scss" scoped>
  .wrap {
    background-color: #fff;
    height: 100%;
    padding: 0 5px;
    // margin-bottom: 50px;
  }

  .mint-swipe {
    height: 150px;
  }

  .mint-swipe-item img {
    width: 100%;
    height: 100%;
  }

  .shop-box {
    box-shadow: 0 0 5px #00000070;
    margin-top: 10px;
    padding: 0 10px 10px 10px;
  }

  .title {
    h4 {
      font-weight: 400;
      border-bottom: 1px solid #ccc;
      padding: 5px;
      margin: 0;
    }
  }

  .price {
    display: flex;
    justify-content: space-between;

    .sale_price {
      em {
        color: red;
        font-style: normal;
      }
    }
  }

  .num {
    display: flex;
    align-items: center;
    margin-top: 20px;
    position: relative;

    .ball {
      width: 15px;
      height: 15px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 5px;
      left: 130px;
      z-index: 99;
    }

    .mui-numbox {
      margin-left: 20px;
      height: 25px;
      position: relative;
    }
  }

  .btn-box {
    margin-top: 20px;
  }

  .shop_argument {
    box-shadow: 0 0 5px #00000070;
    margin-top: 10px;
  }

  .shop_argument_detail {
    padding: 10px;
    border-bottom: 1px solid #ccc;

    p {
      margin-top: 10px;
    }
  }

  .btn_box {
    margin-top: 10px;
    padding: 0 20px;

    .mui-btn {
      width: 100%;
      margin-bottom: 10px;
    }
  }
</style>